<template>
    <div class="home">
        <kt-table ref="kttable" :totalRecord="dataTotalCount"  @page-change="PageChange">
            <div class="tableHeader">
                <el-button type="text" @click="" class="tableButton">全部话题</el-button>
                <el-button type="text" @click="AddArticle" class="tableAdd" v-show="isLoginIn">新增话题</el-button>
            </div>
            <div>
                <el-table :data="tableData" :show-header="false" :highlight-current-row="true" :loading="loading" @row-dblclick="gotoEditPage">
                    <el-table-column prop="Type" label="类别" :formatter="formatter" width="58" >
                        <template slot-scope="scope">
                            <el-tag size="mini" v-if="scope.row.Type==1">分享</el-tag>
                            <el-tag size="mini" v-if="scope.row.Type==2">讨论</el-tag>
                            <el-tag size="mini" v-if="scope.row.Type==3">问答</el-tag>
                            <el-tag size="mini" v-if="scope.row.Type==4">吐槽</el-tag>
                            <el-tag size="mini" v-if="scope.row.Type==5">建议</el-tag>
                            <el-tag size="mini" v-if="scope.row.Type==6">招聘</el-tag>
                            <el-tag size="mini" v-if="scope.row.Type==7">其他</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Title" label="标题" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span class="worknum" @click="gotoEditPage(scope.row)">{{scope.row.Title}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </kt-table>
    </div>
</template>

<script>

export default {
    data() {
        return {
            dataTotalCount:0,
            tableData:[],
            loading:false,
            isLoginIn:false
        }
    },
    mounted(){
        this.isLoginIn=this.$store.state.auth.isLoggedIn;
        this.loadData();
    },
    components: {
    },
    methods:{
        PageChange:function(){
            this.loadData();
        },
        loadData() {
            try {
                var params={
                    PageIndex: this.$refs.kttable.getPageIndex(),
                    PageSize: this.$refs.kttable.getPageSize(),
                }
                var requestStr = "/api/Article/GetAllArticle";
                this.loading = true;
                kt.post(requestStr,params)
                    .then(res => {
                        if(res.RtnCode!==0){
                            this.tableData = res.PostData.ArticleList;
                            this.dataTotalCount=res.PostData.TotalCount;
                            this.loading = false;
                        }else{
                            kt.showErrorToast(res.ErrorMsg);
                        }
                    })
                    .catch(error => {
                      kt.showErrorToast(error.message);
                      this.loading = false;
                    });
            } catch (error) {
                kt.showErrorToast(error.message);
                this.loading = false;
            }
        },
        AddArticle(){
            this.$router.push({ path: "ArticleCreate" });
        },
        gotoEditPage(row){
            this.$router.push({ path: "ArticleEdit/"+ row.Id  });
            // this.$router.push({ name: "博文", params: { id: row.Id } });
        },
        formatter(row, column) {
            switch(row.Type){
                case 1:
                return "分享";
                case 2:
                return "讨论";
                case 3:
                return "问答";
                case 4:
                return "吐槽";
                case 5:
                return "建议";
                case 6:
                return "招聘";
                case 7:
                return "其他";
            }
        },
    }
}
</script>
<style>
.tableHeader{
  background-color:#e1e1e1;
  height: 40px;
  position:relative;
}

.tableHeader .el-button{
  margin: auto; 
  /* position: absolute;  */
  top: 0; 
  left: 0; 
  bottom: 0; 
  /* right: 0; */
}

.tableButton{
  color: #80bd01;
  padding-left: 20px;
}

.tableAdd{
  float: right;
  color: black;
  padding-right: 20px;
}
</style>
